import React, { Component } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Card, Button, Col, Timeline, Modal, message } from 'antd';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import InforDetail from './InforDetail';
import StandardTable from '@/components/StandardTable';
import UpdateModle from '../../SocialManage/Adjust/UpdateModle';
import ServiceRemark from '../../components/ServiceRemark';
import HdlRemark from '@/pages/components/HdlRemark';
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';

@connect(({ accuadjust, loading }) => ({
  disabledYmFlag: accuadjust.disabledYmFlag,
  detail: accuadjust.detail,
  loading: loading.effects['accuadjust/fetchDetail'],
  execAdjId: accuadjust.execAdjId,
  adjdetData: accuadjust.adjdetData,
}))
class BasicProfile extends Component {
  state = {
    maistrue: false,
    dataSource: [],
    scroll: { x: 1600 },
    zodiacFlag: false,
    visUpdate: false,
    visHdlRemark: false,
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { execAdjId, activeKey } = location.query;
    if (Number(activeKey) === 1 || Number(activeKey) === 2) {
      this.setState({
        zodiacFlag: true,
      });
    }
    dispatch({
      type: 'accuadjust/fetchDetail',
      payload: { execAdjId },
    });
    dispatch({
      type: 'accuadjust/updateModelData',
      payload: {
        execAdjId,
      },
    });
  }

  // 提交数据
  submitData = values => {
    const { dispatch, location, detail } = this.props;
    const { execAdjId } = location.query;
    dispatch({
      type: 'accuadjust/addHdlRemark',
      payload: { ...values, busiId: execAdjId, sendId: detail.sendId, taskId: detail.taskId },
      callback: response => {
        if (response) {
          message.success('办理备注成功！');
          this.handleModalVisible();
        } else {
          message.warning(`${response.message || '办理备注失败！'}`);
        }
      },
    });
  };

  handleModalVisible = flag => {
    this.setState({ visHdlRemark: !!flag });
  };

  detailed = () => {
    const { dispatch, detail } = this.props;
    dispatch({
      type: 'accuadjust/fetchInforDetail',
      payload: { sendId: detail.empSendInfoVo.sendId },
    });
    this.setState({
      maistrue: true,
    });
  };

  showUpdateModle = () => {
    const { execAdjId, dispatch } = this.props;
    dispatch({
      type: 'accuadjust/queryEntryAdjDet',
      payload: {
        execAdjId,
      },
    });
    this.setState({
      visUpdate: true,
    });
  };

  handleOk = () => {
    this.setState({
      maistrue: false,
    });
  };

  addHdl = () => {
    this.handleModalVisible(true);

    const { dispatch, detail } = this.props;
    dispatch({
      type: 'addempsocial/getRemark',
      payload: { sendId: detail.sendId, busiId: detail.accuEmpOrdId },
    });
  };

  visUpdateModle = flag => {
    this.setState({
      visUpdate: !!flag,
    });
  };

  submitUpdateData = values => {
    const { dispatch } = this.props;
    dispatch({
      type: 'accuadjust/updateZodiacYM',
      payload: { ...values },
    });
    this.setState({
      visUpdate: false,
    });
  };

  render() {
    const { detail, loading, adjdetData, disabledYmFlag } = this.props;
    const { dataSource, scroll, maistrue, zodiacFlag, visUpdate, visHdlRemark } = this.state;
    const { empSendInfoVo, empBaseInfoVo, adjDetList, accuRemark } = detail;
    const insAccuColumns = [
      {
        title: '产品名称',
        dataIndex: 'ass',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        align: 'center',
        sorter: (a, b) => new Date(b.beginDate) - new Date(a.beginDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '无'),
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        align: 'center',
        sorter: (a, b) => new Date(b.endDate) - new Date(a.endDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '无'),
      },
      {
        title: '缴纳金额',
        dataIndex: 'payAmount',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '企业基数',
        dataIndex: 'entpBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '企业缴费比例(%)',
        dataIndex: 'entpProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '企业附加(元)',
        dataIndex: 'entpAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '企业缴费',
        dataIndex: 'entpPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '个人基数',
        dataIndex: 'perBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '个人缴费比例(%)',
        dataIndex: 'perProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '个人附加(元)',
        dataIndex: 'perAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),

        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '个人缴费',
        dataIndex: 'perPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),

        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '执行地区',
        dataIndex: 'cityId',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];
    return (
      <PageHeaderWrapper>
        <InforDetail empSendInfoVo={empSendInfoVo} empBaseInfoVo={empBaseInfoVo} />
        <Card
          title={<span style={{ fontWeight: 'bolder' }}>调整明细</span>}
          bordered={false}
          extra={zodiacFlag ? <a onClick={() => this.showUpdateModle()}>修改</a> : null}
        >
          {adjDetList && adjDetList.length ? (
            <Col
              style={{
                paddingTop: 14,
                marginTop: 14,
                height: 200,
                minHeight: 200,
                overflow: 'hidden',
                overflowY: 'scroll',
              }}
            >
              <Timeline>
                {adjDetList.map(item => (
                  <Timeline.Item key={item.operTime}>
                    <p>
                      <span style={{ marginRight: 18 }}>
                        {item.operTime ? moment(item.operTime).format('YYYY-MM-DD HH:mm') : '--'}
                      </span>
                      <span>{item.operName} </span>
                    </p>
                    <p>{item.content}</p>
                  </Timeline.Item>
                ))}
              </Timeline>
            </Col>
          ) : (
            '暂无数据'
          )}
        </Card>
        <HdlRemark hdlRemark={accuRemark} />
        <ProRecording proRecording={detail.probDets} />
        <UpdateModle
          visUpdateModle={this.visUpdateModle}
          visUpdate={visUpdate}
          dataSource={adjdetData}
          submitUpdateData={this.submitUpdateData}
          getInjList={this.getInjList}
          disabledYmFlag={disabledYmFlag}
        />

        <Modal visible={maistrue} onOk={this.handleOk} onCancel={this.handleOk}>
          <Card>
            <StandardTable
              scroll={scroll}
              data={dataSource}
              columns={insAccuColumns}
              rowKey="execAdjId"
              loading={loading}
            />
          </Card>
        </Modal>
        <ServiceRemark
          visHdlRemark={visHdlRemark}
          handleModalVisible={this.handleModalVisible}
          submitData={this.submitData}
          detailHdl={accuRemark}
        />
        <FooterToolbar style={{ width: '100%' }}>
          <Button style={{ marginLeft: 8 }} onClick={this.addHdl}>
            添加办理备注
          </Button>
          <Button onClick={() => router.goBack()}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default BasicProfile;
